<template>
  <div class="icon-box">
    <!-- <el-button type="primary" size="mini" icon="el-icon-edit" @click="clickBtn"></el-button> -->
    <el-input @focus="clickBtn" :placeholder="placeholder" v-model="wgsVal"></el-input>

    <el-dialog
      :close-on-click-modal="false"
      append-to-body
      title="wgs84坐标"
      :visible.sync="lonlatVisible"
      width="550px"
    >
      <div>
        <el-row>
          <el-form
            class="single_3column"
            label-position="left"
            :inline="true"
          >
            <el-form-item
              label="小数点"
              prop="name"
            >
              <el-input class="input" style="width: 400px"  v-model="wgs84" @input="wgsEnd" clearable auto-complete="off" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,5})?).*$/g, '$1')" />
            </el-form-item>
            <el-form-item label="度分秒" prop="content">
              <el-input
                v-model="limit"
                style="width: 120px"
                onkeyup="value=value.replace(/[^\d]/g,'')"
                @input="limitEnd"
              >
                <template slot="append" class="template-limit">
                  °
                </template>
              </el-input>
              <el-input
                v-model="minute"
                style="width: 120px"
                onkeyup="value=value.replace(/[^\d]/g,'')"
                @input="limitEnd"
              >
                <template slot="append">
                  ′
                </template>
              </el-input>
              <el-input
                v-model="second"
                style="width: 150px"
                onkeyup="value=value.replace(/[^\d]/g,'')"
                @input="limitEnd"
              >
                <template slot="append">
                  ″
                </template>
              </el-input>
            </el-form-item>
          </el-form>
        </el-row>

      </div>
      <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="updateBtn">
            保 存
          </el-button>
          <el-button type="primary" @click="cancelClock">
            取 消
          </el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "LatLon",
  components: {},
  data() {
    return {
      lonlatVisible: false,
      wgs84: "",
      limit: "", //度
      minute: "", //分
      second: "", //秒
      wgsVal:""
    };
  },
  props: {
    msgVal: {
      // type: String,
      required:true
    },
    placeholder: {
      type: String,
      default: () => {
        return null
      }
    }
  },
  created() {
    this.wgsVal = this.msgVal;
    this.wgs84 = this.msgVal;
  },
  methods: {
    clickBtn() {
      this.lonlatVisible = true;
      this.wgs84 = this.wgsVal
      this.wgsEnd();
    },
    cancelClock(){
      this.lonlatVisible = false;
      this.clearData()
    },
    //保存方法
    updateBtn(){
      this.wgsVal = this.wgs84;
      this.$emit('child-event',this.wgs84)
      this.lonlatVisible = false;
      this.clearData()
    },
    //wgs失去焦点的方法
    wgsEnd(){
      if(this.wgs84){
          const arr1 = this.wgs84.toString().split(".");
          const d = arr1[0];
          let tp = "0." + arr1[1]
          tp = String(tp * 60); //这里进行了强制类型转换
          const arr2 = tp.split(".");
          const f = arr2[0];
          tp = "0." + arr2[1];
          tp = tp * 60;
          const m = tp;
          if(isNaN(f)){
              this.minute = 0
          }else{
              this.minute = f
          }
          if(isNaN(m)){
              this.second = 0
          }else{
              if(m.toString().length>5){
                this.second = m.toString().substring(0,5)
              }else{
                this.second = m
              }

          }
          if(isNaN(d)){
              this.limit = null
          }else{
              this.limit = d
          }
      }
    },
    //度分秒结束转换
    limitEnd(){
            if(!this.limit){
                this.limit = 0
            }
            if(!this.minute){
                this.minute = 0
            }
            if(!this.second){
                this.second = 0
            }
            let fen = parseFloat(this.minute) + parseFloat(this.second / 60);
            let wgs = parseFloat(fen / 60) + parseFloat(this.limit);
            if(wgs){
              this.wgs84 =wgs.toFixed(4)
            }

            if(isNaN(this.wgs84)){
                this.wgs84 = null
            }
    },

    clearData(){
      this.wgs84= "",
      this.limit="", //度
      this.minute= "", //分
      this.second="" //秒
    },

    initData(){
      this.wgs84= "";
      this.limit=""; //度
      this.minute= ""; //分
      this.second=""; //秒
      this.wgsVal = ""
    }


  },
  watch: {
    $route() {}
  }
};
</script>
<style scoped lang="less">
.input-wgs84 /deep/.el-input__inner {
  border-radius: 0px 4px 4px 0px !important;
}
.input-limit /deep/.el-input__inner {
  border-radius: 0px !important;
}
.input-min /deep/.el-input__inner {
  border-radius: 0px !important;
}
.input-sec /deep/.el-input__inner {
  border-radius: 0px !important;
}
/deep/.el-form--label-left .el-form-item__label{
  margin: 0;
}
</style>
